<template>
    <el-dialog
        title="学习主题列表"
        :visible.sync="visible"
        :modal-append-to-body="false"
        width="70%">
        <el-form :inline="true" @keyup.enter.native="onSubmit">
            <el-form-item label="筛选">
                <el-cascader
                :show-all-levels="false"
                v-model="form.courseId"
                placeholder="工作场景筛选"
                :options="labelGroup"
                clearable
                filterable
                @change="handleChange"/>
            </el-form-item>
            <el-form-item label="类型" prop="type">
                <el-select
                    class="w-24"
                    v-model="form.type"
                    placeholder="内容类型"
                    clearable
                    @change="onSubmit()">
                    <el-option
                        v-for="item in typeOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select
                    class="w-24"
                    v-model="form.status"
                    placeholder="状态"
                    clearable
                    @change="onSubmit()">
                    <el-option
                        v-for="item in statusOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="关键词" prop="section">
                <el-input
                    v-model="form.section"
                    placeholder="搜索学习节点名称"
                    class="input-width"/>
            </el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
            <el-button type="primary" @click="onResetForm">重置</el-button>
        </el-form>
        <el-table :data="data">
            <el-table-column label="名称" prop="name"></el-table-column>
            <el-table-column label="类型" width="100">
                    <template slot-scope="{row}">
                        {{ row.type | typeFilter }}
                    </template>
            </el-table-column>
            <el-table-column label="学习主题">
                <template slot-scope="{row}">
                    <div v-for="(v, i) in row.courses" :key="i">
                        <el-tag class="m-1" v-if="v">{{ v }}</el-tag></div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template slot-scope="{row}">
                    <el-button
                    type="primary"
                    @click="onAddClick(row)"
                    v-if="!isChoiced(row)">选择</el-button>
                    <el-button
                    type="success"
                    disabled
                    @click="onAddClick(row)"
                    v-else>已选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div v-if="totalElements > 0" class="footer">
            <pagination
            ref="pagination"
            :currentPage="form.page"
            :pageSize="form.size"
            :handleCurrentChange="onCurrentChange"
            :handlePageSizeChange="onPageSizeChange"
            :totalElements="totalElements"
            ></pagination>
        </div>
    </el-dialog>
</template>

<script>
import Pagination from '@/components/base/Pagination';

export default {
    components: {
        Pagination,
    },
    mixins: [require('../../mixins/CacheQuery').default],
    data() {
        return {
            loading: false,
            visible: false,
            data: [],
            form: {
                page: 1,
                size: 50,
                section: '',
                courseId: '',
                status: '',
                type: '',
            },
            statusOptions: [
                {id: true, name: '上架'},
                {id: false, name: '下架'},
            ],
            typeOptions: [
                {id: 1, name: '文章'},
                {id: 2, name: '视频'},
            ],
            totalElements: 0,
            courseOptions: [],
            labelGroup: [
                {value: 1, label: '岗位角色', children: []},
                {value: 2, label: '学习计划', children: []},
                {value: 3, label: '专题', children: []},
            ],
            listForm: {
                companyId: this.$store.state.my.company_id,
            },
        };
    },
    filters: {
        courseFilter: function (value) {
            if (!value) return '';
            return value.join(', ');
        },
        typeFilter: function (value) {
            if (!value) return '';
            const type = ['文章', '视频'];
            return type[(value - 1)];
        },
        videoFilter: function (val, type) {
            if (type === 2) {
                return val === '' ? '未上传' : '已上传';
            }
            return '';
        },
    },
    props: ['list', 'studyId'],
    methods: {
        open() {
            this.visible = true;
        },
        onSubmit() {
            this.form.page = 1;
            this.fetchData();
        },
        onResetFilters() {
            this.$refs.form.resetFields();
        },
        onCurrentChange(val) {
            this.form.page = val;
            this.fetchData();
        },
        onPageSizeChange(val) {
            this.form.size = val;
            this.form.page = 1;
            this.fetchData();
        },
        fetchData() {
            this.loading = true;
            API.get('section', {params: this.form}).then((res) => {
                this.data = res.content;
                this.totalElements = res.pagination.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        fetchLabel() {
            API.get('label/group', {params: this.listForm}).then((res) => {
                this.courseOptions = res.courses;
                res.labels.map((val) => {
                    const data = this.courseOptions.filter((v) => v.label_id === val.value);
                    val.children = data;
                    if (val.type) {
                        val.types = JSON.parse(val.type);
                        val.types.map((type) => {
                            this.labelGroup[type - 1].children.push(val);
                            return type;
                        });
                    }
                    return val;
                });
            });
        },
        onResetForm() {
            this.form.section = '';
            this.form.courseId = '';
            this.form.status = '';
            this.form.type = '';
            this.fetchData();
        },
        handleChange(value) {
            if (value.length === 3) {
                this.form.courseId = value[2];
                this.onSubmit();
            }
            if (value.length === 0) {
                this.form.courseId = '';
                this.onSubmit();
            }
        },
        isChoiced({id}) {
            if (this.list) {
                return this.list.includes(id);
            }
            return this.studyId === id;
        },
        onAddClick(row) {
            this.$emit('addSection', row);
        },
        close() {
            this.visible = false;
        },
    },
    mounted() {
        this.fetchData();
        this.fetchLabel();
    },
};
</script>
